<template>
    <van-tabbar 
      v-model="tabbarActive" 
      active-color="#f00" 
      inactive-color="#666"
      @change="onChangeFn"
      >
      <van-tabbar-item icon="home-o" to='/'>
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? footerIcon_1.active : footerIcon_1.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="search" to='category'>分类</van-tabbar-item>
      <van-tabbar-item icon="friends-o">发现</van-tabbar-item>
      <van-tabbar-item icon="setting-o">购物车</van-tabbar-item>
      <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
    </van-tabbar>
</template>

<script>
import {ref, reactive, onMounted} from 'vue'
export default{
  name:'category',
  data(){
    return {
      msg:'footer底部导航栏'
    }
  },
  setup(){
    // 屠导航栏，切换的索引
    let tabbarActive = ref(0);

    onMounted(()=>{
      // console.log( typeof localStorage.getItem('switchTabVal') )
      let _v = localStorage.getItem('switchTabVal');
      tabbarActive.value = Number( _v )
    })

    const onChangeFn = (inx)=>{
      // console.log( inx )
      localStorage.setItem('switchTabVal', inx);
    }

    const footerIcon_1 = {
      active: 'https://res.vmallres.com//uomcdn/CN/cms/202202/655C627E76D597D20ACAE2FFFE05A943.png',
      inactive: 'https://res.vmallres.com//uomcdn/CN/cms/202105/3F3570287DBE1F6B7DB01175AB00320D.png',
    };

    return {
      tabbarActive,
      footerIcon_1,
      onChangeFn
    }
  }
}
</script>